<template>
  <div class="time-filter">
    <ul>
      <li
        @click="changeDate(time.id, time.value)"
        v-for="time in timeList"
        track-by="id"
        :class="{ 'dateActive': dateActiveStyle == time.id }">
        {{time.text}}
      </li>
    </ul>
    <div class="active-bg"></div>
  </div>
</template>

<script>
  export default{
    props: ['timeList'],
    data () {
      var data = {}
      data.dateActiveStyle = 0
      return data
    },
    methods: {
      changeDate: function (id, value) {
        if (id > 2) {
          document.querySelector('.active-bg').style.left = (id - 2) * 33 + 24.5 + '%'
        } else {
          document.querySelector('.active-bg').style.left = 7.8 + '%'
        }
        this.dateActiveStyle = id
        this.$dispatch('changeDate', value)
      }
    },
    // 去掉日,和周
    ready: function () {
      try {
        if (this.timeList instanceof Array) {
          this.timeList.splice(0, 2)
        }
      } catch (error) {
      }
    }
  }
</script>

<style lang="scss" scoped>
  $height: 5vh;
  div.time-filter {
    position: relative;
    height: $height;
    line-height: $height;
    background: rgba(246, 250, 255, 1);

    .active-bg {
      position: absolute;
      left: 7.8%;
      top: 1vh;
      width: 36%;
      height: 3vh;
      border-radius: .2rem;
      background: url("");
      z-index: 1;
      transition: all .2s;
    }

    ul {
      position: absolute;
      display: flex;
      width: 100%;
      z-index: 2;

      li {
        flex: 1;
        box-sizing: border-box;
        color: rgba(153, 153, 153, 1);
        text-align: center;
        list-style: none;
        font-size: .28rem;
        border-radius: .2rem;
      }

      .dateActive {
        color: rgba(74, 144, 226, 1);
        animation: bgenter .5s forwards;
      }
    }

    ul:after, ul:before {
      display: table;
      content: " ";
    }

    ul:after {
      clear: both;
    }
  }
</style>
